package com.deneme;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.appengine.api.blobstore.BlobKey;
import com.google.appengine.api.blobstore.BlobstoreService;
import com.google.appengine.api.blobstore.BlobstoreServiceFactory;
import com.google.appengine.api.users.User;
import com.google.appengine.api.users.UserService;
import com.google.appengine.api.users.UserServiceFactory;

import functions.images.CommonHTML;
import functions.images.CommonHTML.PageName;

public class ViewImages extends HttpServlet {
    private static BlobstoreService blobstoreService = BlobstoreServiceFactory.getBlobstoreService();
    
    public void doPost(HttpServletRequest req,
			HttpServletResponse resp)
					throws IOException {
    	doGet(req, resp);
    }

    public void doGet(HttpServletRequest req,
			HttpServletResponse resp)
					throws IOException {
    	/* get information for the current user */
		UserService userService = UserServiceFactory.getUserService();
		User user = userService.getCurrentUser();
		UserData userData = UserData.getDataForUser(user);
		/* get the keys that index the images the user has uploaded */
		ArrayList<BlobKey> imageKeys = userData.getImageKeys();
		
		/* for each of the image keys, retrieve the image and put a link to it in the display
		 * area for saved images */
		StringBuilder sb_table = new StringBuilder();
		sb_table.append("<div class='view_images'>\n");
		if (imageKeys != null && imageKeys.size() > 0) {
			for (BlobKey blobKey : imageKeys) {
				sb_table.append("<a href='#' onclick='select(\"" + blobKey.getKeyString() + "\")'>" +
						"<img id='" + blobKey.getKeyString() + "' border='0' height='200' width='200' src='/serve?blob-key=" + blobKey.getKeyString() + "' />" +
								"</a>\n");
			}
		}
		/* if the user has no saved images, display this message instead */
		else {
			sb_table.append("You do not have any saved images");
		}
		sb_table.append("</div>\n");
		
		/* build the javascript string that contains functions necessary
		 * for the display images page to work properly. */
		String javascript = "<script type='text/javascript'>\n" +
				"var selected = null;\n" + // this holds the key of the image that is currently selected
				// this function is called when an image is clicked
				"function select(key) {\n" +
				"	if(selected != null) {\n" + // if there is an already selected image...
				"		var img = document.getElementById(selected);\n" + 
				"		img.setAttribute(\"border\", 0);\n" + // set its border back to 0
				"	}\n" +
				"	selected = key;\n" + // set the clicked image to be the selected image
				"	img = document.getElementById(selected);\n" +
				"	img.setAttribute(\"border\", 5);\n" + // and set its border to be 5
				"}\n" +
				"\n" +
				// this function is called when the create puzzla button is clicked
				// it relocates to the puzzle configuration page, and uses the selected
				// image as the image for the new puzzle
				"function create() {\n" +
				"	var url = \"/puzzleconfiguration?blob-key=\" + selected;\n" +
				"	window.location = url;\n" +
				"}\n" +
				"\n" +
				// this function is called when the delete image button is clicked.
				// it redirects to the delete image servlet
				"function deletess() {\n" +
				"	var url = \"/deleteimage?blob-key=\" + selected;\n" +
				"	window.location = url;\n" +
				"}\n" +
				"\n" +
				// testing function
				"function alertss() {\n" +
				"	alert(\"testing\");\n" +
				"}\n" +
				"</script>\n";
		
		String html = 	"<html>\n" +
					  	"	<head>\n" +
						"		<link rel=\"stylesheet\" href=\"/styles.css\" type=\"text/css\" />\n" +
					  	"		<title>Your Pictures!</title>\n" +
						javascript +
					  	"	</head>\n" +
					  	"	<body>\n" +
					  	"		<div class='content'>" +
					  	CommonHTML.getNavBar(PageName.images) + // this includes the navigation menu
					  	"		<div class='floatleft'><button class='fun_button' onclick='deletess()'>Delete Selected Picture</button></div>\n" +
					  	"		<div class='floatright'><button class='fun_button' onclick='create()'>Create Puzzle With Picture</button></div>" +
					  	"		" + sb_table.toString() + "\n" +
					  			"</div><!-- content -->" +
					  	"	</body>\n" +
					  	"</html>\n";
		
		resp.setContentType("text/html");
		PrintWriter out = resp.getWriter();
		
		out.print(html);
    }
				
}
